{extend name="index/iframe" /}

{block name="content"}
<div style="margin: 20px 40px;">
    <div id="container" style="min-width: 310px; height: 550px;"></div>
    <div class="message"></div>
</div>
{/block}

{block name="css"}
{/block}

{block name="js"}
<!-- jquery -->
<script src="__STATIC__/hcharts/jquery-3.1.1.min.js"></script>
<!-- highcharts主框架 -->
<script src="__STATIC__/hcharts/code/highcharts.js"></script>
<!-- 导出 -->
<script src="__STATIC__/hcharts/code/modules/exporting.js"></script>
<!-- 数据加载功能模块 -->
<script src="__STATIC__/hcharts/code/modules/data.js"></script>
<script src="__STATIC__/hcharts/code/modules/series-label.js"></script>
<script src="__STATIC__/hcharts/code/modules/oldie.js"></script>
<!-- 中文 -->
<script src="__STATIC__/hcharts/highcharts-zh_CN.js"></script>
<!-- 主题 -->
<!--<script src="__STATIC__/hcharts/code/themes/gray.js"></script>-->
<!--<script src="__STATIC__/hcharts/code/themes/sand-signika.js"></script>-->

<script>
    layui.use(['form'], function(){
        var chart = Highcharts.chart('container', {
            series: {$series},
            title: {
                text: '{$Think.get.game_id}：{$Think.get.game_name}'
            },
            subtitle: {
                text: '游戏新增：{$Think.get.game_add} | 游戏创角：{$Think.get.game_role} | 游戏活跃：{$Think.get.game_active} | 付费金额：{$Think.get.pay_money}'
            },
            xAxis: {
                categories: {$date_type},
                tickWidth: 0,
                gridLineWidth: 1,
            },
            yAxis: [{ // 第一个 Y 轴，放置在左边（默认在坐标）
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }, {    // 第二个坐标轴，放置在右边
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,  // 通过此参数设置坐标轴显示在对立面
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }],

            tooltip: {
                shared: true,
                crosshairs: true,
                // 时间格式化字符
                // 默认会根据当前的数据点间隔取对应的值
                // 当前图表中数据点间隔为 1天，所以配置 day 值即可
                dateTimeLabelFormats: {
                    day: '%Y-%m-%d'
                }
            },
            plotOptions: {
//                series: {
//                    cursor: 'pointer',
//                    point: {
//                        events: {
//                            // 数据点点击事件
//                            // 其中 e 变量为事件对象，this 为当前数据点对象
//                            click: function (e) {
//                                $('.message').html( Highcharts.dateFormat('%Y-%m-%d', this.x) + ':<br/>  访问量：' +this.y );
//                            }
//                        }
//                    },
//                    marker: {
//                        lineWidth: 1
//                    },
                line: {
                    dataLabels: {
                        enabled: true          // 开启数据标签
                    },
                    cursor: 'pointer',
                    marker: {
                        lineWidth: 1
                    },
                }

//                }
            }
        });
    });

</script>
{/block}